<template >
  <div class="uploader_dialog" :class="{ 'active': open }" v-if="visible">
    <div class="dialog-header">
      <div class="dialog-header-title">{{ title }}</div>
      <div class="action">
        <i :class="!open ? 'el-icon-minus' : 'el-icon-plus'" @click="open = !open"></i>
        <i class="el-icon-circle-close" style="margin-left: 10px;" @click="visible = false"></i>
      </div>
    </div>
    <ul class="uploader-list">
      <li>
        <div class="file-name">LOL_V4.1.3.6_FULL.7z.001</div>
				<div class="file-size">1.86G</div>
				<div class="file-category">分类</div>
				<div class="file-process">5.75%</div>
				<i class="file-remove el-icon-close"></i>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "文件上传"
		},
		value: [Boolean]
	},
	data() {
		return {
			open: false
		}
	},
	computed: {
		visible: {
			get() {
				return this.value
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	}
};
</script>

<style scoped lang="scss">
  @import "@/styles/mixin.scss";
.uploader_dialog {
  position: fixed;
  right: 30px;
  bottom: 0;
  width: 635px;
  height: 430px;
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid $--border-color-base;
  box-shadow: 0 0 10px #ccc;
  margin-bottom: -2px;
	background: #fff;
	transition: all .5s ease;
	&.active {
		bottom: -385px;
	}
  .dialog-header {
    padding: 0 20px;
    border-bottom: 1px solid $--border-color-base;
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .dialog-header-title {
      color: #666;
      font-weight: 200;
      font-style: normal;
    }
    .action {
      i {
        cursor: pointer;
        font-weight: bold;
      }
    }
  }
  .uploader-list {
    li {
			padding: 13px;
			display: flex;
			align-items: center;
      width: 100%;
      height: 50px;
			border-bottom: 1px solid $--border-color-base;
			& > div {
				font-size: 12px;
			}
      .file-name {
        width: 43%;
      }
      .file-size, .file-category {
				text-indent: 13px;
				width: 13%;
			}
			.file-category{
				color: #FF803A;
			}
			.file-process {
				width: 21%;
			}
			.file-remove {
				width: 10%;
				cursor: pointer;
				text-align: right;
			}
    }
  }
}
</style>
